<template>
  <div class="container">
    <div class="item1">
      <div class="xiala">
        <el-col :span="24">
          <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-sub-menu index="1">
              <template #title>
                <span>练习室</span>
              </template>
              <el-menu-item index="/practive" style="color: red"
                >我的练习室</el-menu-item
              >
            </el-sub-menu>
            <el-menu-item index="/practive/mediaCache">缓存</el-menu-item>
            <el-button text @click="open" style="margin-left: 5px; color: black"
              >音频库</el-button
            >
            <el-menu-item index="/practive/Collections">收藏</el-menu-item>
            <el-menu-item index="/practive/viewRecords">历史</el-menu-item>
          </el-menu>
        </el-col>
      </div>
      <!-- <div class="left"></div> -->
    </div>
    <div class="item2">
      <div class="headerItem">
        <div
          style="padding: 28px 40px"
          :class="flag === 1 ? 'active' : ''"
          @click="handlerHistory"
        >
          <span @click="handler">浏览记录</span>
          <div v-if="isShow" @click="delete1(index)"> 批量删除</div>
        </div>
      </div>
      <div class="right">
        <!-- <nullData/> -->
        <div class="demo-input-size" style="margin-top: 15px">
          <el-row :gutter="46">
            <el-col :span="7" style="margin-left: 40px">
              <el-input
                v-model="input1"
                class="w-50 m-2"
                size="large"
                :prefix-icon="Search"
                style="width: 300px"
            /></el-col>
            <el-col :span="6"
              ><el-button
                type="info"
                plain
                style="height: 40px"
                @click="hos.getHistorySearch(input1)"
                >搜索</el-button
              ></el-col
            >
            <div class="delete"><span>批量删除</span></div>
          </el-row>
        </div>
        <ul class="videoALL">
          <li class="videoList" v-for="(h, index) in hos.content" :key="h.id">
            <div class="video">
            <a href="https://www.dance365.com/detail/video?momentId=e8791793a7654ae297528c4a85822981">
               <img class="videoInfo" :src="h.momentBackup.cover" />
               </a>

              <div class="videoMessage">
                <!-- 之后需要绑定点击事件跳转到视频页 -->
                <div>{{ h.momentTitle }}</div>
                <span class="housework">视频课</span>
                <div class="avatar">
                  <img :src="h.momentBackup.creatorBackup.avatar" alt="" />
                  <!-- 点击跳转到个人主页 -->
                  <span>{{ h.momentBackup.creatorBackup.name }}</span>
                </div>
              </div>
            </div>
            <div class="time">{{ calcTime(h.updateTime) }}</div>
            <!-- 删除按钮 -->
            <el-button
              class="deleteOne"
              text
              @click="centerDialogVisible = true"
              >删除</el-button
            >
            <el-dialog
              v-model="centerDialogVisible"
              title="提示"
              width="30%"
              align-center
            >
              <span>此操作将删除该项, 是否继续?</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="centerDialogVisible = false"
                    >取消</el-button
                  >
                  <el-button type="primary" @click="one">确定</el-button>
                </span>
              </template>
            </el-dialog>
          </li>
        </ul>
        <div class="noContain" v-if="!hos.content.length">
          <span>无更多数据</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "viewRecords",
  components: {},
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";


// 引入仓库
import useUserInfoStore from "../../../store/practive/index";

// 使用仓库
const hos = useUserInfoStore();
//浏览记录点击事件
const handler = () => {
  hos.getHistoryList();
};
onMounted(() => {
  hos.getHistoryList();
});

//计算历史记录时间
const calcTime = (time) => {
  if ((new Date().getTime() - time)> 6000000) {
    let hour = Math.floor((new Date().getTime() - time) / 1000 / 60 / 60);
    return hour + "小时";
  }

  let minutes = Math.floor((new Date().getTime() - time) / 1000 / 60);
  return minutes + "分钟";
  // moment(time).startOf('hour').fromNow();
};


// 列表里删除插件
const centerDialogVisible = ref(false);

// let {id} =hos.content.momentBackup
// 删除确定按钮回调
const one = (id: any) => {
  // 删除传参id
  hos.getDelete(hos.content.id);
  // 先找到数组的索引
  let index = hos.content.indexOf(id, 1);
  // 去掉这个id
  hos.content.splice(index, 1);
  // 删除完成后关闭弹窗
  centerDialogVisible.value = false;
  //重新获取列表
  hos.getHistoryList(id);
};




const handlerHistory = () => {
  flag.value = 1;
};
// s搜索框插件
const input1 = ref("");
// active高亮定义flag
let flag = ref(0);

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
//引用音频库插件
const open = () => {
  ElMessageBox.alert('请打开中舞网APP，点击"练习室"-"音频库"中查看。', {
    confirmButtonText: "确定",
    // callback: (action: Action) => {
    //   ElMessage({
    //     type: 'info',
    //     message: `action: ${action}`,
    //   })
    // },
  });
};
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

/* 遍历数组li的样式 */
.videoALL {
  margin: 0 auto;
 
}
.videoList {
  width: 963px;
  height: 121px;
  margin: 10px 0;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
}
.videoList:hover {
  background-color: #f5f7fa;
}
.video {
  width: 680px;
  height: 121px;
  display: flex;
}
.video .videoInfo {
  width: 169px;
  height: 101px;
  margin: 10px 10px;
  border-radius: 5px;
}
.video .videoMessage {
  margin: 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.video .videoMessage .housework {
  color: rgb(125, 128, 144);
  font-size: 12px;
}
.video .videoMessage img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: text-top;
  margin-right: 10px;
}
.time {
  width: 153px;
  height: 121px;
  line-height: 121px;
  text-align: center;
  font-size: 14px;
  margin-left: 100px;
}
.deleteOne {
  width: 145px;
  height: 121px;
  line-height: 121px;
  text-align: right;
  font-size: 14px;
  color: #b1b3bc;
  margin-right: 5px;
}
.deleteOne:hover {
  color: #f93684;
  cursor: pointer;
}

.container {
  background-color: #c1c1c1;
  width: 1200px;
  margin: auto;
  font-size: 14px;
  display: flex;
}
.xiala {
  width: 170px;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
}

/* .left {
    width: 170px;
    height: 200px;
    border-radius: 5px;
    margin-top: 10px;
  } */

.headerItem {
  width: 1020px;
  height: 100px;
  background-color: #fff;
  border-radius: 5px;
  float: right;
  display: flex;
  align-items: center;
}
.active {
  border-bottom: solid 3px hotpink;
}

.right {
  width: 1020px;
  height: 750px;
  background-color: #fff;
  border-radius: 5px;
  float: right;
  margin-top: 10px;

}
.noContain {
  text-align: center;
  height: 80px;
  line-height: 80px;
  border-bottom: solid 1px #606266;
  color: #606266;
}
.delete {
  position: absolute;
  top: 10px;
  right: 50px;
}
</style>
